<script setup>
import { ref } from 'vue';
import { dictListPageApi, deleteDictApi } from '@/api/sys/dict-type';
import { useRequest } from '@/hooks/pages-repeat';
import dictInfoUpdata from './dict-info-updata.vue';

const { 
  dataFormModalShowHide,
  addOrUpdataRef,
  requestInit, 
  requestObj, 
  pagination,
  rowSelection,
  getDataList,
  addOrUpdata,
  deleteData,
  modalClose
}  = useRequest()
requestInit({
  isPage: true,
  deleteMany: true,
  listApi: dictListPageApi,
  deleteApi: deleteDictApi,
  query: {
    page: 1,
    limit: 20,
    dictValue: undefined,
    dictLabel: undefined,
    dictTypeId: undefined
  }
})

const columns = ref([
  {
    title: '字典值',
    dataIndex: 'dictValue',
  },
  {
    title: '字典标签',
    dataIndex: 'dictLabel',
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    width: 100,
    title: '备注',
    dataIndex: 'remark',
    ellipsis: true
  },
  {
    width: 200,
    title: '创建时间',
    dataIndex: 'createDate',
  },
  {
    width: 180,
    title: '操作',
    dataIndex: 'operate'
  }
])

const emits = defineEmits(['modalClose'])
const drawerOpen = ref(false)
const title = ref('')
const init = (row) => {
  requestObj.value.query.dictTypeId = row.id
  title.value = `字典管理-${row.dictName}`
  drawerOpen.value = true
}
const drawerClose = () => {
  setTimeout(() => {
    emits('modalClose')
  }, 500)
}

defineExpose({
  init
})

</script>

<template>
  <a-drawer
    v-model:open="drawerOpen"
    :title="title"
    placement="right"
    @close="drawerClose"
  >
    <div class="container">
      <a-row :gutter="20" wrap>
        <a-col :span="4">
          <a-input v-model:value.trim="requestObj.query.dictValue" allowClear placeholder="字典值" />
        </a-col>

        <a-col :span="4">
          <a-input v-model:value.trim="requestObj.query.dictLabel" allowClear placeholder="字典标签" />
        </a-col>

        <a-col :span="3">
          <a-space>
            <a-button @click="getDataList()">查询</a-button>
            <a-button v-authority="'sys:dict:save'" type="primary" @click="addOrUpdata()">新增</a-button>
            <a-button v-authority="'sys:dict:delete'" type="primary" danger @click="deleteData()">删除</a-button>
          </a-space>
        </a-col>
      </a-row>
      
      <a-table 
        style="width: 900px;"
        class="table-common"
        :columns="columns" 
        :data-source="requestObj.dataList" 
        rowKey="id" 
        bordered
        :pagination="requestObj.isPage ? pagination : false"
        :loading="requestObj.dataLoading"
        :row-selection="rowSelection"
        @change="getDataList"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex==='operate'">
            <a-button class="btn-primary" v-authority="'sys:dict:update'" type="text" @click="addOrUpdata(record.id)">修改</a-button>
            <a-popconfirm
              title="确定删除该条数据吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteData(record.id)"
            >
              <a-button v-authority="'sys:dict:delete'" type="text" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>

        <template #emptyText>
          <a-empty :description="requestObj.emptyText" />
        </template>
      </a-table>
      <dictInfoUpdata :dictTypeId="requestObj.query.dictTypeId" @modalClose="modalClose" ref="addOrUpdataRef" v-if="dataFormModalShowHide" />
    </div>
  </a-drawer>
</template>

<style lang="scss" scoped>
</style>